<template>
  <div class="seniority">
    <div class="top">
      <h1>排行榜</h1>
      <p  @click="singer">更多 ></p>
    </div>
     <div class="meddle">
            <ul>
                <li v-for="(item,index) in list.topList" :key="index"  @click="singer(item.id)">
                    <img :src="item.picUrl" alt="">
                   <p v-for="(list,index) in item.songList" :key="index">
                       {{index+1+'.'}}{{list.singername}}
                       {{list.songname}}
                   </p>
                </li>
                
            </ul>
     </div>
  </div>
</template>

<script>
import {song} from '../../api/index'
export default {
    data(){
        return {
            list:[]
        }
    },

    methods:{
        //跳转排行榜
        singer(i){
            this.$router.push({
                path:'/ranklist',
                query:{
                    id:i
                }
            })
        },
     //主页排行榜 api
        seniority(){
            this.axios.get(song).then(res=>{
                console.log(res.data.data);
                this.list=res.data.data
            }).catch(err=>{
                console.log(err);
            })
        }
    },
   
    created(){
      this. seniority()
    },
}
</script>

<style lang="scss" scoped>
.seniority{
    width: 1400px;
    margin: 0 auto;
    // border: 1px solid;
    .top{
        display: flex;
        h1{
            margin-top: -10px;
            // margin-left: 20px;
        }
        p{
            margin-left: 40px;
        }
    }
    .meddle{
        width: 1400px;
        margin: 0 auto;
        // border: 1px solid;
        height: 500px;
        ul{  
            display: flex;
            justify-content: space-between;
            width: 1400px;
            flex-wrap: wrap;
            overflow: hidden;
            height: 500px;
            
     
           li{
            //    padding: 0 10px;
               width: 16%;
               height: 500px;
               background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/bg_index_top.jpg?max_age=2592000&v=3beef369200a0863560787fd560c8205);
            
                    img{
                        width: 100%;
                        height: 40%;
                    }
               p{
                   strong{
                       display: block;
                       
                   }
                  
                   margin-top: 30px;

                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-top: 50px;
                    color: #fff;
               }
           }
        }
         
    }
      .meddle>ul>li:nth-of-type(2) {
               
                    background-position: -225px 0px;
            }
             .meddle>ul>li:nth-of-type(3) {
               
                background-position: 224px 0px;
            }
             .meddle>ul>li:nth-of-type(4) {
               
                background-position: -225px 0px;
            }
             .meddle>ul>li:nth-of-type(5) {
               
                background-position: 0px 0px;
            }
             .meddle>ul>li:nth-of-type(6) {
               
                background-position: -448px 0px;
            }
}
</style>